<?php
session_start();
if (!isset($_SESSION['id'])) {
    header('Location: login.php');
    exit;
}
include_once ("../controller/ocorrencia_controller_class.php");
include_once("../controller/ocorrencia_controller_class.php");
include_once("../controller/tipo_ocorrencia_controller_class.php");
include_once("../controller/campus_controller_class.php");
include_once("../controller/predio_controller_class.php");
include_once("../controller/sala_controller_class.php");

//PREENCHER COMBOS

$objEspec = new EspecialidadeController();
$objTipoOco = new TipoOcorrenciaController();
$objUrgencia = new UrgenciaController();
$objCampus = new CampusController();
$objPredio = new PredioController();
$objSala = new SalaController();

$listEspec = $objEspec->selecionar();
$listUrgencia = $objUrgencia->selecionar();
$listCampus = $objCampus->selecionar();

//PREENCHER COMBOS
$objOcorrencia = new OcorrenciaController();

$ocoMuita = $objOcorrencia->selecionar();

$ocoMedia = $objOcorrencia->selecionar();

$ocoPouca = $objOcorrencia->selecionar();
?>
<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>::: SOS UNITAU -- Sistema de ordem de serviço</title>

        <link rel="shortcut icon" href="img/logo.jpg">
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <link rel="stylesheet" type="text/css" href="css/StylePage.css" />
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <link rel="stylesheet" type="text/css" href="css/shadowbox.css" />
        <link href="css/StyleOS.css" type="text/css" rel="stylesheet" />
        <link href="css/style_light.css" type="text/css" rel="stylesheet" />
        <script src="js/modernizr.custom.js"></script>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery1.6.min.js"></script>
        <script src="js/jquery.maskedinput-1.3.min.js"></script>
        <script src="js/jquery-ui-1.8.14.custom.min.js"></script>
        <script src="js/shadowbox.js"></script>
        <script type="text/javascript">
            Shadowbox.init();
        </script>

        <script>
            $(document).ready(function () {
                $("#txtCategoria").change(function () {
                    var cat = $("#txtCategoria").val();

                    $('#txtTipo').find('option').remove();
                    $.post("../funcoes/tipoPorCategoria.php", {id: cat}, function (retorno) {
                        $("#txtTipo").append("<option value='0'> Selecione</option>");

                        $.each(retorno, function (key, value) {
                            //                        alert(value.id + " " + value.nome);
                            $("#txtTipo").append("<option value='" + value.id + "'> " + value.nome + "</option>");
                        });
                        $("#txtTipo").append("<option value='-1'> Outro</option>");

                    }, 'json').fail(function () {
                        alert("erro");
                    });

                });
            });
        </script>



        <script>
            $(document).ready(function () {
                $("#txtCampus").change(function () {
                    var campus = $("#txtCampus").val();
                    var categoria = $("#txtCategoria").val();
                    var tipo = $("#txtTipo").val();
                    var urgencia = $("#txtUrgencia").val();

                    $.post("../funcoes/filtraOS.php", {campus: campus, categoria: categoria, tipo: tipo, urgencia: urgencia},
                    function (data) {
                        $(".remove").find('ul').remove();
                        var id = 1;
                        var g = 1;
                        var m = 1;
                        var s = 1;

                        var div = "";
                        $.each(data, function (key, value) {
//                            alert(value.id + " " + value.categoria);
                            if (value.urgencia == 1) {
                                div = ".grave";
                                id = g++;
                            } else if (value.urgencia == 2) {
                                div = ".medio";
                                id = m++;
                            } else if (value.urgencia == 3) {
                                div = ".simples";
                                id = s++;
                            }

                            $("" + div + "").append(
                                    '<ul class="second-menu">'
                                    + '<h1 class="link">'
                                    + 'OS - ' + id + ', ' + value.categoria + ', ' + value.campus + ''
                                    + '<input type="checkbox" name="chOs[]" id="chOs[]">'
                                    + '<span class="arrow"></span>'
                                    + '</h1>'

                                    + '<ul class="menu">'
                                    + '<li>'
                                    + '<button class="aguardar" name="' + value.id + '" >Aguardar Confirmação</button>'
                                    + '<button onclick="javascript:abrir(\'configOS.php\');"> Configuração </button> <br /><br />'

                                    + '<b><font color="#FFCC00">Funcionário:</font></b> ' + value.funcionario + ' <br /><br />'

                                    + '<div class="photo-os"><b><font color="#FFCC00">Foto OS</font></b></div> <br /><br />'

                                    + '<b><font color="#FFCC00"> Tipo: </font></b>' + value.tipo + ' <br /><br />'

                                    + '<b><font color="#FFCC00"> Descrição da Ocorrência:</font></b> <br />'
                                    + '' + value.comentario + '<br /><br />'


                                    + '<b><font color="#FFCC00"> Nome do Contato:</font></b> Jurandi Macedo<br /><br /><br />'

                                    + '<b><font color="#FFCC00">Contatos:</font></b> <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br /><br />'

                                    + '<b><font color="#FFCC00">Prédio:</font></b> ' + value.predio + '<b><font color="#FFCC00">Sala:</font></b> ' + value.sala + ' <br /><br />'

                                    + '<b><font color="#FFCC00">Data da abertura:</font></b> ' + value.dataAbertura + ' <br />'

                                    + '<b><font color="#FFCC00">Data de inicio:</font></b> Aguardando <br /><br />'

                                    + '<b><font color="#FFCC00"> Data de solução:</font></b> Aguardando <br /><br />'



                                    + '</li>'

                                    + '</ul>'
                                    + '</ul>'
                                    );

                        });
                        $(".link").click(function () {

                            if ($(this).hasClass("active")) {
                                $(".link").removeClass("active");
                            } else {
                                $(".link").addClass("active");
                            }

                            $(".menu").slideUp();
                            if ($(this).next().is(":hidden")) {
                                $(this).next().slideDown(-1, 'easeOutBounce');
                            }

                        });
                    }, 'json').fail(function () {
                        alert("erro");
                    });

                });
                $("#txtCategoria").change(function () {
                    var campus = $("#txtCampus").val();
                    var categoria = $("#txtCategoria").val();
                    var tipo = $("#txtTipo").val();
                    var urgencia = $("#txtUrgencia").val();

                    $.post("../funcoes/filtraOS.php", {campus: campus, categoria: categoria, tipo: tipo, urgencia: urgencia},
                    function (data) {
                        $(".remove").find('ul').remove();
                        var id = 1;
                        var g = 1;
                        var m = 1;
                        var s = 1;

                        var div = "";
                        $.each(data, function (key, value) {
//                            alert(value.id + " " + value.categoria);
                            if (value.urgencia == 1) {
                                div = ".grave";
                                id = g++;
                            } else if (value.urgencia == 2) {
                                div = ".medio";
                                id = m++;
                            } else if (value.urgencia == 3) {
                                div = ".simples";
                                id = s++;
                            }

                            $("" + div + "").append(
                                    '<ul class="second-menu">'
                                    + '<h1 class="link">'
                                    + 'OS - ' + id + ', ' + value.categoria + ', ' + value.campus + ''
                                    + '<input type="checkbox" name="chOs[]" id="chOs[]">'
                                    + '<span class="arrow"></span>'
                                    + '</h1>'

                                    + '<ul class="menu">'
                                    + '<li>'
                                    + '<button class="aguardar" name="' + value.id + '" >Aguardar Confirmação</button>'
                                    + '<button onclick="javascript:abrir(\'configOS.php\');"> Configuração </button> <br /><br />'

                                    + '<b><font color="#FFCC00">Funcionário:</font></b> ' + value.funcionario + ' <br /><br />'

                                    + '<div class="photo-os"><b><font color="#FFCC00">Foto OS</font></b></div> <br /><br />'

                                    + '<b><font color="#FFCC00"> Tipo: </font></b>' + value.tipo + ' <br /><br />'

                                    + '<b><font color="#FFCC00"> Descrição da Ocorrência:</font></b> <br />'
                                    + '' + value.comentario + '<br /><br />'


                                    + '<b><font color="#FFCC00"> Nome do Contato:</font></b> Jurandi Macedo<br /><br /><br />'

                                    + '<b><font color="#FFCC00">Contatos:</font></b> <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br /><br />'

                                    + '<b><font color="#FFCC00">Prédio:</font></b> ' + value.predio + '<b><font color="#FFCC00">Sala:</font></b> ' + value.sala + ' <br /><br />'

                                    + '<b><font color="#FFCC00">Data da abertura:</font></b> ' + value.dataAbertura + ' <br />'

                                    + '<b><font color="#FFCC00">Data de inicio:</font></b> Aguardando <br /><br />'

                                    + '<b><font color="#FFCC00"> Data de solução:</font></b> Aguardando <br /><br />'



                                    + '</li>'

                                    + '</ul>'
                                    + '</ul>'
                                    );



                        });
                        $(".link").click(function () {

                            if ($(this).hasClass("active")) {
                                $(".link").removeClass("active");
                            } else {
                                $(".link").addClass("active");
                            }

                            $(".menu").slideUp();
                            if ($(this).next().is(":hidden")) {
                                $(this).next().slideDown(-1, 'easeOutBounce');
                            }

                        });
                    }, 'json').fail(function () {
                        alert("erro");
                    });
                });
                $("#txtTipo").change(function () {
                    var campus = $("#txtCampus").val();
                    var categoria = $("#txtCategoria").val();
                    var tipo = $("#txtTipo").val();
                    var urgencia = $("#txtUrgencia").val();

                    $.post("../funcoes/filtraOS.php", {campus: campus, categoria: categoria, tipo: tipo, urgencia: urgencia},
                    function (data) {
                        $(".remove").find('ul').remove();
                        var id = 1;
                        var g = 1;
                        var m = 1;
                        var s = 1;

                        var div = "";
                        $.each(data, function (key, value) {
//                            alert(value.id + " " + value.categoria);
                            if (value.urgencia == 1) {
                                div = ".grave";
                                id = g++;
                            } else if (value.urgencia == 2) {
                                div = ".medio";
                                id = m++;
                            } else if (value.urgencia == 3) {
                                div = ".simples";
                                id = s++;
                            }

                            $("" + div + "").append(
                                    '<ul class="second-menu">'
                                    + '<h1 class="link">'
                                    + 'OS - ' + id + ', ' + value.categoria + ', ' + value.campus + ''
                                    + '<input type="checkbox" name="chOs[]" id="chOs[]">'
                                    + '<span class="arrow"></span>'
                                    + '</h1>'

                                    + '<ul class="menu">'
                                    + '<li>'
                                    + '<button class="aguardar" name="' + value.id + '" >Aguardar Confirmação</button>'
                                    + '<button onclick="javascript:abrir(\'configOS.php\');"> Configuração </button> <br /><br />'

                                    + '<b><font color="#FFCC00">Funcionário:</font></b> ' + value.funcionario + ' <br /><br />'

                                    + '<div class="photo-os"><b><font color="#FFCC00">Foto OS</font></b></div> <br /><br />'

                                    + '<b><font color="#FFCC00"> Tipo: </font></b>' + value.tipo + ' <br /><br />'

                                    + '<b><font color="#FFCC00"> Descrição da Ocorrência:</font></b> <br />'
                                    + '' + value.comentario + '<br /><br />'


                                    + '<b><font color="#FFCC00"> Nome do Contato:</font></b> Jurandi Macedo<br /><br /><br />'

                                    + '<b><font color="#FFCC00">Contatos:</font></b> <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br /><br />'

                                    + '<b><font color="#FFCC00">Prédio:</font></b> ' + value.predio + '<b><font color="#FFCC00">Sala:</font></b> ' + value.sala + ' <br /><br />'

                                    + '<b><font color="#FFCC00">Data da abertura:</font></b> ' + value.dataAbertura + ' <br />'

                                    + '<b><font color="#FFCC00">Data de inicio:</font></b> Aguardando <br /><br />'

                                    + '<b><font color="#FFCC00"> Data de solução:</font></b> Aguardando <br /><br />'



                                    + '</li>'

                                    + '</ul>'
                                    + '</ul>'
                                    );



                        });
                        $(".link").click(function () {

                            if ($(this).hasClass("active")) {
                                $(".link").removeClass("active");
                            } else {
                                $(".link").addClass("active");
                            }

                            $(".menu").slideUp();
                            if ($(this).next().is(":hidden")) {
                                $(this).next().slideDown(-1, 'easeOutBounce');
                            }

                        });
                    }, 'json').fail(function () {
                        alert("erro");
                    });
                });
                $("#txtUrgencia").change(function () {
                    var campus = $("#txtCampus").val();
                    var categoria = $("#txtCategoria").val();
                    var tipo = $("#txtTipo").val();
                    var urgencia = $("#txtUrgencia").val();

                    $.post("../funcoes/filtraOS.php", {campus: campus, categoria: categoria, tipo: tipo, urgencia: urgencia},
                    function (data) {
                        $(".remove").find('ul').remove();
                        var id = 1;
                        var g = 1;
                        var m = 1;
                        var s = 1;

                        var div = "";
                        $.each(data, function (key, value) {
//                            alert(value.id + " " + value.categoria);
                            if (value.urgencia == 1) {
                                div = ".grave";
                                id = g++;
                            } else if (value.urgencia == 2) {
                                div = ".medio";
                                id = m++;
                            } else if (value.urgencia == 3) {
                                div = ".simples";
                                id = s++;
                            }

                            $("" + div + "").append(
                                    '<ul class="second-menu">'
                                    + '<h1 class="link">'
                                    + 'OS - ' + id + ', ' + value.categoria + ', ' + value.campus + ''
                                    + '<input type="checkbox" name="chOs[]" id="chOs[]">'
                                    + '<span class="arrow"></span>'
                                    + '</h1>'

                                    + '<ul class="menu">'
                                    + '<li>'
                                    + '<button class="aguardar" name="' + value.id + '" >Aguardar Confirmação</button>'
                                    + '<button onclick="javascript:abrir(\'configOS.php\');"> Configuração </button> <br /><br />'

                                    + '<b><font color="#FFCC00">Funcionário:</font></b> ' + value.funcionario + ' <br /><br />'

                                    + '<div class="photo-os"><b><font color="#FFCC00">Foto OS</font></b></div> <br /><br />'

                                    + '<b><font color="#FFCC00"> Tipo: </font></b>' + value.tipo + ' <br /><br />'

                                    + '<b><font color="#FFCC00"> Descrição da Ocorrência:</font></b> <br />'
                                    + '' + value.comentario + '<br /><br />'


                                    + '<b><font color="#FFCC00"> Nome do Contato:</font></b> Jurandi Macedo<br /><br /><br />'

                                    + '<b><font color="#FFCC00">Contatos:</font></b> <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br />'
                                    + '(12) 8888-99990, (12) 8888-99990, <br /><br />'

                                    + '<b><font color="#FFCC00">Prédio:</font></b> ' + value.predio + '<b><font color="#FFCC00">Sala:</font></b> ' + value.sala + ' <br /><br />'

                                    + '<b><font color="#FFCC00">Data da abertura:</font></b> ' + value.dataAbertura + ' <br />'

                                    + '<b><font color="#FFCC00">Data de inicio:</font></b> Aguardando <br /><br />'

                                    + '<b><font color="#FFCC00"> Data de solução:</font></b> Aguardando <br /><br />'



                                    + '</li>'

                                    + '</ul>'
                                    + '</ul>'
                                    );

                        });
                        $(".link").click(function () {

                            if ($(this).hasClass("active")) {
                                $(".link").removeClass("active");
                            } else {
                                $(".link").addClass("active");
                            }

                            $(".menu").slideUp();
                            if ($(this).next().is(":hidden")) {
                                $(this).next().slideDown(-1, 'easeOutBounce');
                            }

                        });
                    }, 'json').fail(function () {
                        alert("erro");
                    });
                });
                $(".link").click(function () {

                    if ($(this).hasClass("active")) {
                        $(".link").removeClass("active");
                    } else {
                        $(".link").addClass("active");
                    }

                    $(".menu").slideUp();
                    if ($(this).next().is(":hidden")) {
                        $(this).next().slideDown(-1, 'easeOutBounce');
                    }

                });
            });
        </script>
    </head>
    <!--------------------------------------------------------------------------------------------------->

    <body> <!-- Inicio -->
        <div class="loading"></div>
        <div class="container"> <!-- container -->



            <!-----------------------------CONTEUDO DA PÁGINA ALTERAR FUNCIONARIO --------------------------------->
            <!------- SEGUE ABAIXO ------->



            <div class="barra-superior"></div>
            <div class="sobre-empresa">
                Powered by: Grupo NOP
            </div>

            <!------------- CONTEUDO DE FORMULARIOS---------------------->

            <div class="titulo-page">
                ::: Refinar busca de OS
            </div>

            <form name="altFuncionario" id="altFuncionario" method="post" enctype="multipart/form-data" action="" class="style-form">
                <fieldset style="height:auto;">

                    <legend>Informações de busca:</legend>
                    <table width="800px" class="table-form">
<!--                        <tr>
                            <td> <label for="txtOs"> Código da OS: </label> </td>
                            <td> <input name="txtOs" id="txtOs" type="text" required  placeholder="Ex: OS 33" /></td>
                        </tr>-->

                        <tr>
                            <td> 
                                <label for="txtCampus"> Campus: </label> 
                            </td>
                            <td> 
                                <select name="txtCampus" id="txtCampus" style="width:150px">
                                    <option value="0">Selecione</option>
                                    <?php if (count($listCampus) > 0) { ?>
                                        <?php foreach ($listCampus as $campus) { ?>
                                            <option value="<?= $campus->getId() ?>"><?= $campus->getNome() ?></option>
                                            <?php
                                        }
                                    }
                                    ?>
                                </select>
                            </td>

                        </tr>

                        <tr>
                            <td> 
                                <label for="txtCategoria"> Categoria: </label> 
                            </td>
                            <td> 
                                <select name="txtCategoria" id="txtCategoria" style="width:150px">
                                    <option value="0">Selecione</option>
                                    <?php if (count($listEspec) > 0) { ?>
                                        <?php foreach ($listEspec as $categoria) { ?>
                                            <option value="<?= $categoria->getId() ?>"><?= $categoria->getNome() ?></option>
                                            <?php
                                        }
                                    }
                                    ?>
                                </select> </td>


                        </tr>

                        <tr>
                            <td> 
                                <label for="txtTipo"> Tipo de Ocorrência: </label> 
                            </td>
                            <td> 
                                <select name="txtTipo" id="txtTipo" style="width:150px">
                                    <option value="0">Selecione</option>
                                </select> 
                            </td>


                        </tr>

                        <tr>
                            <td> 
                                <label for="txtUrgencia"> Urgência: </label> 
                            </td>
                            <td> 
                                <select name="txtUrgencia" id="txtUrgencia" style="width:150px">
                                    <option value="0">Selecione</option>
                                    <?php if (count($listUrgencia) > 0) { ?>
                                        <?php foreach ($listUrgencia as $urg) { ?>
                                            <option value="<?= $urg->getId() ?>"><?= $urg->getNome() ?></option>
                                            <?php
                                        }
                                    }
                                    ?>
                                </select> 
                            </td>

                        </tr> 

                    </table>

                    <input type="button" value="Buscar" style="display:inline-block; margin-left:75%; margin-top:3%;" class="botao" />
                    <input type="button" value="Cancelar" style="margin-left:5%;" class="botao" onclick=""/>    
                </fieldset>

            </form>











                <!------------- /CONTEUDO DE FORMULARIOS --------------------->
                <div class="clear"></div>
                <div>:: Resultado de busca: </div>
                <div class="clear"></div>

                <!--------------------------RESULTADO DE BUSCA -------------------------------------->

                <div class="controls">
                    <label>Somente Grave:</label>
                </div>
                <div class="controls" style="margin-left:390px; position:absolute; margin-top:-65px; background-color:#FC0">
                    <label>Somente Médio:</label>
                </div>

                <div class="controls" style="margin-left:780px; position:absolute; margin-top:-65px; background-color:#060">
                    <label>Somente Simples:</label>
                </div>

                <!---------------INICIO MEDIO------------------------->
                <div class="wrapper"
                     style="margin-left:780px; position:absolute; margin-top:-60px"><!-- INICIO -->
                    <div class="accordian move remove medio">

                    </div>
                </div>
                <!----------------------------/Médio ---------------->

                <!-----------------------INICIO SIMPLES-------------------->
                <div class="wrapper" style="margin-top:-60px; margin-left:1170px; position:absolute;"><!-- INICIO -->
                    <div class="accordian move remove simples">

                    </div>
                </div>
                <!-----------------------FIM SIMPLES-------------------->

                <!---------------------INICIO GRAVE ------------------>
                <div class="wrapper" style=" margin-top:-60px; margin-left:390px"><!-- INICIO -->
                    <div class="accordian move remove grave">

                    </div>
                </div>
                <!----------------------------/Grave ---------------->
               


            <!--------------------- FINAL RESULTADO DE BUSCA ----------------------------------->







            <!-- MENU NA FRENTE DO CONTEUDO, CONTEUDO FICARÁ INATIVO -->

            <!--------------------------------------MENU LATERAL---------------------------------------->
            <?php include_once("menuLateral.php"); ?>

            <!-- /MENU NA FRENTE DO CONTEUDO, CONTEUDO FICARÁ INATIVO -->





            <!-----------------------------------/FIM--------------------------------------------------------->



            <!-----------------------RESULTADO da BUSCA ------------------------>









            <!------------------------------/CONTEUDO DA PÁGINA ALTERAR FUNCIONARIO ----------------------------------->



        </div><!-- /container -->
    </body><!-- Fim -->
    <!--------------------------------------------------------------------------------------------------->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    <script src='http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script>$(function () {
                $('#Container').mixItUp({
                    load: {
                        filter: '.category-1'
                    }
                });
            });//@ sourceURL=pen.js
    </script>

    <script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
    <script src="js/classie.js"></script>
    <script src="js/borderMenu.js"></script>

    <!-- SCRIPTS POP-UP -->
    <script>
            function abrir(URL) {

                var width = 850;
                var height = 500;

                var left = 240;
                var top = 90;

                window.open(URL, 'janela', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left + ', scrollbars=no, status=no, toolbar=0, location=no, 			directories=no, menubar=no, resizable=0 ,maximized=no, fullscreen=no');

            }

    </script>


    <!-- SCRIPTS POP-UP -->
    <script>
        function abrir(URL) {

            var width = 850;
            var height = 500; //ALTERADO, PARA UMA BOA VISUALIZAÇÃO

            var left = 240;
            var top = 100;

            window.open(URL, 'janela', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left + ', scrollbars=no, status=no, toolbar=no, location=no, 			directories=no, menubar=no, resizable=0,maximized=no, fullscreen=no');

        }



    </script>

    <!-- /SCRIPTS POP-UP -->

    <style type="text/css">
        .tooltip {
            width: 250px;
            font-size: 11px;
            font-family: Arial, sans-serif;
            background: #444;
            border: 1px solid #090909;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            position: absolute;
            z-index: 1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            color:#fff;
            padding:12px 24px;
            line-height:18px;
        }

        .tooltip:after {
            content: '';
            position: absolute;
            border-color: transparent  #444 transparent transparent;
            border-style: solid;
            border-width: 10px;
            height: 0;
            width: 0;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -10px;
            margin-left: -20px;
        }

        .tooltip:before {
            content: '';
            position: absolute;
            border-color:   transparent #090909 transparent transparent;
            border-style: solid;
            border-width: 10px;
            height: 0;
            width: 0;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -10px;
            margin-left: -20px;
        }



        .ttw-notification-menu{
            width: 600px;
        }




    </style>
</html>
